<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>连续的图像边框</title>
  <style>
    .border-box {
      display: inline-block;
      margin: 10px;
    }

    .box1 {
      border: 30px solid transparent;
      border-image: url(../images/bg.jpg) 30;
      padding: 30px;
    }

    .box2 {
      background: url('../images/bg.jpg');
      background-size: cover;
      padding: 30px;
    }

    .box2>div {
      background: white;
      padding: 30px;
    }

    .box3 {
      padding: 30px;
      border: 30px solid transparent;
      background: linear-gradient(white, white),
        url('../images/bg.jpg');
      background-size: cover;
      background-clip: padding-box, border-box;
      background-origin: border-box;
    }

    .box4 {
      padding: 1em;
      border: 1em solid transparent;
      background: linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg,
          red 0, red 12.5%,
          transparent 0, transparent 25%,
          #58a 0, #58a 37.5%,
          transparent 0, transparent 50%) 0 / 5em 5em;
    }

    @keyframes ants { to { background-position: 100% } }
    .box5 {
      padding: 1em;
      border: 1px solid transparent;
      background:
      linear-gradient(white, white) padding-box,
      repeating-linear-gradient(-45deg,
      black 0, black 25%, white 0, white 50%
      ) 0 / .6em .6em;
      animation: ants 12s linear infinite;
    }
  </style>
</head>

<body>
  <div class="border-box box1">AAAAAAA</div>
  <div class="border-box box2">
    <div>AAAAAAA</div>
  </div>
  <div class="border-box box3">AAAAAAA</div>
  <div class="border-box box4">AAAAAAA</div>
  <div class="border-box box5">AAAAAAA</div>

</body>

</html>
